<template>
  <div class="main-wrap">
    <tab-items>
      <div :name="item" class="first" v-for="item in tabArray">
        <div>{{item}}</div>
      </div>
    </tab-items>
    <vue-drawer-layout ref="drawerLayout">
      <div class="drawer" slot="drawer">
        <div class="text">This is drawer</div>
        <a href="javascript:void(0)" class="btn"
           @click="handleToggleDrawer">Hide Drawer</a>
      </div>
      <div class="content" slot="content">
        <div class="text">This is content.</div>
        <a href="javascript:void(0)" class="btn"
           @click="handleToggleDrawer">Show Drawer</a>
      </div>
    </vue-drawer-layout>
  </div>
</template>

<script>
  import tabItems from '../components/tabContent.vue';
  import vueDrawerLayout from '../components/DrawerLayout.vue';

  export default {
    name: 'index',
    data () {
      return {
        heights:window.innerHeight,
        tabArray:["买入","自动再平衡","一键卖出"]
      }
    },
    created(){

    },

    mounted(){

    },
    updated(){

    },
    methods:{
      handleToggleDrawer() {
        this.$refs.drawerLayout.toggle();
      }
    },
    components:{
      tabItems,
      vueDrawerLayout
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../css/index.css";
  @import "../css/animate.css";
 .drawer{
   position: absolute;
   background-color: #FFF;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0
 }
  .btn {
    position: absolute;
    display: block;
    border-radius: 5px;
    top:45px;
    left: 5px;
    font-size: 14px;
    padding: 10px 12px;
    color: #333;
    background-color: #fff;
    text-decoration: none;
  }
  .content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-top:40px;
    background-color: #FFF;
  }
</style>


